<!-- 角色 -->
<template>
  <q-page class="q-px-xs">
    <!-- 查询操作 -->
    <q-toolbar>
      <table-filter :model-value="query" show-date @change="handleQuery" />
      <q-space />
      <q-btn icon="plus" color="primary" @click="handleAdd()">新增</q-btn>
      <q-btn icon="delete" color="error" :disable="!hasSelected" class="q-mx-sm" @click="handleDelete()">删除</q-btn>
      <q-btn icon="excel" color="warning" :loading="exportLoading" @click="handleExport">导出</q-btn>
    </q-toolbar>

    <!-- 数据表格 -->
    <q-table :columns="columns" selection="multiple" v-bind="tableOptions">
      <template #body-cell-disabled="props">
        <q-td :props="props">
          <q-chip :color="props.row.disabled ? 'red-4' : ''" dense>{{ props.row.disabled ? '作废' : '正常' }}</q-chip>
        </q-td>
      </template>
      <template #body-cell-action="props">
        <q-td :props="props">
          <q-btn round flat icon="edit" color="primary" @click="handleEdit(props.row.roleId)" />
          <q-btn round flat icon="delete" color="error" @click="handleDelete(props.row.roleId)" />
        </q-td>
      </template>
    </q-table>

    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <role-form :id="roleId" :title="title" @close="closeDialog" @after-save="handleQuery" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { usePageQuery, useTable, useCrudList, useFormDialog } from 'src/composables';

  import crudApi from 'src/api/system/role';
  import RoleForm from './RoleForm.vue';

  defineOptions({ name: 'Role' });

  // 查询条件
  const query = usePageQuery();

  // 表格数据
  const { tc, formatter } = useTable();
  const { tableOptions, handleQuery, hasSelected, handleDelete, exportLoading, handleExport } = useCrudList(crudApi, query, 'roleId');
  const columns = [
    tc('roleCode', '角色编码', 120),
    tc('roleName', '角色名称', 130),
    tc('disabled', '角色状态', 80, 'center'),
    tc('remark', '备注说明', 180, 'left'),
    tc('updatedBy', '操作人', 100, 'center'),
    tc('updatedTime', '操作时间', 100, { align: 'center', format: formatter.date }),
    tc('action', '操作', 85),
  ];
  onMounted(handleQuery);

  // 表单窗口
  const { dialog, title, id: roleId, handleAdd, handleEdit, closeDialog } = useFormDialog('角色');
</script>

<style lang="scss" scoped></style>
